<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>key的原理</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
   </head>

<body> 
    <!-- 
      面试题：react、vue中的key有什么作用？(key的内部原理)

        1、虚拟DOM中key的作用：
                key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成新的【新的虚拟DOM】，
                随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

        2、对比规则：
              (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
                  ①.若虚拟DOM中内容没变，直接使用之前的真实DOM!
                  ②.若虚拟DOM中的内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。             
                  ③       

              (2).旧虚拟DOM中未找到与新虚拟DOM相同的key   
                  ①.创建新的真实DOM，随后渲染到页面

        3、用index作为key可能会引发的问题：
                1、若对数据进行：逆序添加、逆序删除等破坏顺序操作：
                          会产生没有必要的真实DOM更新 ==>  界面效果没问题，但效率低。
                2、如果结构中还包含输入类的DOM：
                          会产生错误DOM更新 ==>  界面有问题

        4、开发中如和选择key?
                  1、最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
                  2、如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示
                    用index作为key是没有问题的。                            
     -->



    <!--准备好一个容器-->
    <div id="root">
         <!-- 
            ul标签和li标签一起使用，创建标签无序列表
            p:可以看作是一个形参从persons数组里获取数据
         -->

        <!-- 遍历数组 -->
      <h2>人员列表(遍历数组)</h2>    
      <button @click.once="add">添加一个南风</button>  
      <ul>
       <li v-for="(p,index) in persons"  :key="p.id">
        {{p.name}}-{{p.age}}
        <input type="text">
       </li>   
      </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。

    new Vue({
        el:'#root',
        data:{
            persons:[  // 多个人使用数组存储信息
                {id:'001',name:'南风一号',age:18},
                {id:'002',name:'南风二号',age:20},
                {id:'003',name:'南风三号',age:22}
            ]           
        },
        methods: {
          add(){
            const p = {id:'004',name:'南风四号',age:'24'}
            // 给数组增加数据
            this.persons.unshift(p)
          }
        },
    })
</script>
</html>

